<!DOCTYPE html>
<html>

<head lang="en">
    <title>攻略文章</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyDetails.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        var userStr = sessionStorage.getItem("user");
        var user;
        if (userStr) {
            user = JSON.parse(userStr);
        }
        var greatStatus;//点赞状态
        var enshrineStatus;//收藏状态
        var signId; //标记对象的id

        var id = getParams().id;

        $(function () {
            //查询大攻略对象,,回显大攻略名称
            $.get(baseUrl + "strategyDetails/" + id, function (data) {
                $(".detail").renderValues(data);
                var json = {"id": getParams().id, "browseNum": data.browseNum + 1};
                $.ajax({
                    type: "PUT",
                    url: baseUrl + "/strategyDetails",
                    data: json
                });
            });
            //如果是用户查询标记状态
            if (user) {
                $.get(baseUrl + "strategyDetailSigns/" + id, function (data) {
                    if (data) {
                        //如果有新建过sign对象获取id
                        signId = data.id;

                    }
                    //回显标记状态
                    if (data.greatStatus) {
                        $(".great").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                        greatStatus = true;
                    }
                    if (data.enshrineStatus) {
                        $(".enshrine").removeClass("fa-heart-o").addClass("fa-heart");
                        enshrineStatus = true;
                    }
                });

            }
            //查询当前攻略的点赞和收藏总数
            $.get(baseUrl + "strategyDetailSigns/count/" + id, function (data) {
                //渲染数据
                $(".getNum").renderValues(data);

            });
            //查询评论总数,并回显
            $.get(baseUrl + "strategyDetailComments/" + id, function (data) {
                $("#commentBtn").html(data)
            });

            //绑定点赞和收藏点击效果
            $(".enshrine").click(function () {
                //如果不是用户跳转到登录页面
                if (!user) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '登录之后才能收藏哦!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html";
                        }
                    });

                } else {
                    //如果是用户则改变收藏的动画效果并改变收藏的状态
                    changeClass($(this), "fa-heart-o", "fa-heart");
                    enshrineStatus = !enshrineStatus;
                    var json = {
                        'strategyDetail.id': id,
                        enshrineStatus: enshrineStatus,
                        greatStatus: greatStatus
                    };
                    //发送请求更新用户的标记状态和更新大攻略的收藏总数
                    if (!signId) {//根据标记对象id判断是发送新增还是更新请求
                        //新增
                        $.post(baseUrl + "strategyDetailSigns", json, function (data) {
                            $("#enshrineNum").html(data.data.enshrineStatus);
                            //新增操作要生成一个标记id来判断下次要更新操作
                            $.get(baseUrl + "strategyDetailSigns/" + id, function (data) {
                                if (data) {
                                    //如果有新建过sign对象获取id
                                    signId = data.id;
                                }
                            });
                        });
                        $.get(baseUrl + "strategyDetailSigns/count/" + id, function (data) {
                            //回显收藏总数
                            $("#enshrineNum").html(data.greatStatus);
                        });
                    } else {
                        //更新
                        $.ajax({
                            url: baseUrl + "strategyDetailSigns/" + signId,
                            method: "put",
                            data: json,
                            success: function (data) {
                                //回显收藏总数
                                $("#enshrineNum").html(data.data.enshrineStatus);
                            }
                        })

                    }

                }
            });
            $(".great").click(function () {
                if (user) {
                    //如果是用户则改变点赞的动画效果并改变点赞的状态
                    changeClass($(this), "fa-thumbs-o-up", "fa-thumbs-up");
                    greatStatus = !greatStatus;
                    var json = {
                        'strategyDetail.id': id,
                        enshrineStatus: enshrineStatus,
                        greatStatus: greatStatus

                    };
                    //发送请求更新用户的标记状态和更新大攻略的点赞总数
                    if (!signId) {//根据标记对象id判断是发送新增还是更新请求
                        //新增
                        $.post(baseUrl + "strategyDetailSigns", json, function (data) {
                            if (data.success) {
                                //新增操作要生成一个状态id来判断下次是更新操作
                                $.get(baseUrl + "strategyDetailSigns/" + id, function (data) {
                                    if (data) {
                                        //如果有新建过sign对象获取id
                                        signId = data.id;
                                    }
                                });
                                //更新点赞总数
                                $("#greatNum").html(data.data.greatStatus);
                            }
                        })


                    } else {
                        //更新
                        $.ajax({
                            url: baseUrl + "strategyDetailSigns/" + signId,
                            method: "put",
                            data: json,
                            success: function (data) {
                                if (data.success) {
                                    //更新点赞总数
                                    $("#greatNum").html(data.data.greatStatus);
                                }
                            }
                        })
                    }
                } else {
                    //如果不是用户跳转到登录页面
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '登录之后才能点赞哦!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html";
                        }
                    });


                }
            });
            //绑定评论按钮事件
            $("#commentBtn").click(function () {
                window.location.href = "/mine/strategyDetailComment.html?id=" + id;
            })

        });
    </script>
</head>
<body>

<div class=" nav-search">
    <a href="javascript:history.go(-1);">
        <span><i class="fa fa-chevron-left"></i></span>
    </a>
</div>
<hr>

<div class="container detail">
    <h4 class="title"><strong render-html="title"></strong></h4>
    <img class="head-img" render-src="coverUrl">
    <div class="content" render-html="strategyContent.content">
    </div>
</div>

<div class="container d-flex getNum">
    <div class="p-2  flex-fill">
        <i class="fa fa-thumbs-o-up great" id="greatNum" render-html="greatStatus"></i>
    </div>
    <div class="p-2  flex-fill"><i class="fa  fa-commenting-o handleBtn" id="commentBtn"
                                   render-html="commentNum"> </i>
    </div>
    <div class="p-2  flex-fill"><i class="fa fa-heart-o enshrine" id="enshrineNum" render-html="enshrineStatus"></i>
    </div>
</div>


</body>

</html>